<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <div>
          <el-button type="primary" @click="goback">返回</el-button>
        </div>
      </div>
      <div class="text item">
        <el-alert title="添加商品信息" type="info" center show-icon> </el-alert>
        <br />
        <el-steps :active="activeNameup - 0" finish-status="success">
          <el-step title="步骤 1" description="基本信息"></el-step>
          <el-step title="步骤 2" description="商品参数"></el-step>
          <el-step title="步骤 3" description="商品属性"></el-step>
          <el-step title="步骤 4" description="商品图片"></el-step>
          <el-step title="步骤 5" description="商品内容"></el-step>
          <el-step title="完成" description="完成"></el-step>
        </el-steps>
        <br />
        <template>
          <el-tabs
            style="height: 400px"
            v-model="activeNameup"
            tabPosition="left"
          >
            <el-tab-pane label="基本信息" name="0">
              <el-form :model="addobj" label-width="100px" :rules="rules">
                <el-form-item label="商品名称" prop="goods_name">
                  <el-input v-model="addobj.goods_name" value=""></el-input>
                </el-form-item>

                <el-form-item label="价格" prop="goods_price">
                  <el-input v-model="addobj.goods_price"></el-input>
                </el-form-item>

                <el-form-item label="重量" prop="goods_weight">
                  <el-input v-model="addobj.goods_weight"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="goods_number">
                  <el-input v-model="addobj.goods_number"></el-input>
                </el-form-item>
                <el-form-item label="分类列表" prop="goods_cat">
                  <div class="text item">
                    <div class="block">
                      <el-cascader
                        v-model="value"
                        :options="listobj"
                        :props="{
                          expandTrigger: 'hover',
                          value: 'cat_id',
                          label: 'cat_name',
                        }"
                        @change="handleChange"
                      ></el-cascader>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="1"> </el-tab-pane>
            <el-tab-pane label="商品属性" name="2">
              <el-form>
                <el-form-item label="数量" prop="goods_number">
                  <el-input v-model="addobj.goods_number"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品图片" name="3">
              商品图片:
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-tab-pane>
            <el-tab-pane
              label="商品内容"
              name="4"
              class="last"
              style="height: 100%"
            >
              <div>
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="textarea"
                  maxlength="100"
                  show-word-limit
                >
                </el-input>
              </div>
              <div class="lastdiv">
                <el-button type="primary" @click="next">提交</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="完成" name="5" class="wc">
              <i
                class="el-icon-success"
                style="color: green; font-size: 100px"
              ></i>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import { api_categories,api_addgoods } from "../../api/goods";
export default {
  data() {
    return {
      text: "",
      textarea: "",
      staticList: [],
      listobj: [], //及联
      value: [], //及联
      activeNameup: 0,
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],

        goods_price: [
          { required: true, message: "请输入价格", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入数量", trigger: "blur" },
        ],
        goods_cat: [{ required: true, message: "请输入数量", trigger: "blur" }],
        goods_weight: [
          { required: true, message: "请输入重量", trigger: "blur" },
        ],
      },
      imageUrl: "",
      addobj: {
        goods_name: "",
        goods_cat: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        pics: "",
        attrs: [],
      },
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleChange(val) {
      this.addobj.goods_cat = val.join(",");
      console.log(this.addobj.goods_cat);
    },
    async query() {
      let rst = await api_categories(this.fenleilist);
      this.listobj = rst.data;
    },
    goback() {
      this.$router.push("goods");
    },
    async next() {
      this.activeNameup = "5";
      console.log(this.addobj);
      let rst = await api_addgoods(this.addobj);
      console.log(rst);
      if (rst.meta.status == 201) {
        this.$message.success(rst.meta.msg);
        this.query();
      } else {
        this.$message.error(rst.meta.msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/div.el-tabs__content {
  height: 100%;
}
.last {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .lastdiv {
    display: flex;
    flex-direction: column-reverse;
  }
}
.wc {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>